{% load bayketags %}
<div id="header-top" class="has-background-black-bis">
    <div class="is-flex is-justify-content-space-between is-align-items-center container" style="height:40px">
        <div class="head-top-left">
            {% block head_top_left %}
            欢迎您光临本店！
            {% endblock %}  
        </div>
        <div class="head-top-right">
            {% block head_top_right %}
            {% if request.user.is_authenticated %}
            <div class="dropdown is-hoverable usertools">
                <div class="dropdown-trigger">
                  <button class="button is-radiusless is-shadowless" aria-haspopup="true" aria-controls="dropdown-menu4" 
                    style="background: none; border:none">
                    <span>欢迎您，{{ request.user.username }}</span>
                    <span class="icon is-small">
                      <i class="mdi mdi-menu-down" aria-hidden="true"></i>
                    </span>
                  </button>
                </div>
                <div class="dropdown-menu" id="dropdown-menu4" role="menu" style="z-index:1000">
                  <div class="dropdown-content">
                    <a class="dropdown-item" href="{% url 'baykeshop:menmber' request.user.id %}">
                        <span class="mdi mdi-account-box-outline"></span>
                        个人中心
                    </a>
                    <a class="dropdown-item" href="{% url 'baykeshop:menmber-orders' %}">
                        <span class="mdi mdi-basket-plus-outline"></span>
                        我的订单
                    </a>
                    <div class=" dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'baykeshop:logout' %}">
                        <span class="mdi mdi-logout"></span>
                        退出
                    </a>
                  </div>
                </div>
            </div>
            {% else %}
            <a class="mr-2" href="{% url 'baykeshop:login' %}" target="_top">
                <span class="icon"><i class="mdi mdi-login"></i></span>
                登录
            </a> <span class="is-size-6">|</span>
            <a class="mr-3" href="{% url 'baykeshop:register' %}" target="_top">
                <span class="icon"><i class="mdi mdi-cash-register"></i></span>
                注册
            </a>
            {% endif %}
            {% cartscount request as cartcount %}
            <a class="cart" href="{% url 'baykeshop:carts' %}" id="cart">
                <span class="icon"><i class="mdi mdi-cart-check"></i></span>
                购物车({$ cartcount $})
            </a>
            {% endblock %}
        </div>
    </div>
</div>
<script>
    var bayke = new Vue({
        el: '#cart',
        delimiters: ['{$', '$}'],
        data: {
           cartcount: Number('{% cartscount request %}')
        },
        methods: {
            toastMessage(type, message){
                return this.$buefy.toast.open({
                    message: message,
                    type: type
                })
            },
        },
    })
</script>